<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- 3.组件的使用 -->
      <App></App>
      <Count></Count>
    </div>
    <script>
      Vue.config.productionTip = false;

      const App = Vue.extend({
        template: `
          <div>
            <h1>App组件</h1>
            <button @click="show">show</button>
          </div>
        `,
        methods: {
          show() {
            console.log(this.$bus);
          },
        },
      });

      const Count = Vue.extend({
        template: `
          <div>
            <h1>Count组件</h1>
            <button @click="show">show</button>
          </div>
        `,
        methods: {
          /* 
            VueComponent构造函数 继承了 Vue构造函数
            组件实例---> VueComponent构造函数的原型对象 ---> Vue构造函数的原型对象--->Object的原型对象--->null
            每创建一个组件都会得到一个VueComponent构造函数,但是Vue构造函数只有一个
            那就是说每一个组件实例对象 沿着原型链找到的 VueComponent的原型对象不一定是一样的
            但是每一个组件实例对象 沿着原型链找到的Vue的原型对象一定是同一个
            如果我们在Vue的构造函数的原型对象上扩展一个属性或者方法,则所有的组件实例都可以访问
          
          */
          show() {
            console.log(this.$bus);
            console.log(this); //组件实例化对象
            console.log(this.__proto__, "this.__proto__"); //VueComponent.proptype
            console.log(this.__proto__.__proto__, "this.__proto__.__proto__ "); //Vue.prototype
            console.log(
              this.__proto__.__proto__.__proto__, //Object.prototype
              "this.__proto__.__proto__.__proto__ "
            );
            console.log(
              this.__proto__.__proto__.__proto__.__proto__, //null
              "this.__proto__.__proto__.__proto__.__proto__"
            );
          },
        },
      });
      console.log(App, "App");

      const vm = new Vue({
        el: "#app",
        data() {
          return {};
        },
        components: {
          App,
          Count,
        },
      });

      Vue.prototype.$bus = "1";
     
    </script>
  </body>
</html>
